<template>
  <div class="main-container">
    <banner></banner>
    <div class="main-content-container">
      <div class="recommend-list-container">
        <!--        可切换推荐-->
        <recommend-nav :item="item"></recommend-nav>
        <recommend-message :show-message="showMessage"></recommend-message>
        <!--        新碟推荐-->
        <recommend-nav :item="navTopAlbum"></recommend-nav>
        <recommend-message :show-message="getTopAlbumAllMessage"></recommend-message>
        <!--        榜单--><!--        排行表-->
        <recommend-nav :item="MVRankingNav"></recommend-nav>
        <div class="mv-ranking-list-container">
          <m-v-ranking-list
              class="mv-ranking-list"
              v-for="(list,index) in MVRankingListMessage"
              v-if="list.content"
              :key="index"
              :type="list.type"
              :content="list.content">
          </m-v-ranking-list>
        </div>
      </div>
      <!--      登陆推荐歌手-->
      <div class="userInfo-content-container">
        <recommend-user-message></recommend-user-message>
        <recommend-singer class="singer"></recommend-singer>
        <!--        写给你们的话-->
        <some-heartfelt-words></some-heartfelt-words>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/recommend/Banner";
import RecommendNav from "@/components/recommend/RecommendNav";
import RecommendMessage from "@/components/recommend/RecommendMessage";
import RecommendUserMessage from "@/components/recommend/RecommendUserMessage";
import RecommendSinger from "@/components/recommend/RecommendSinger";
import MVRankingList from "@/components/recommend/recommendSmallItem/MVRankingList";
import SomeHeartfeltWords from "@/components/recommend/SomeHeartfeltWords";
import {
  getDJProgram, getMVRankingList,
  getPersonalized,
  getPrivatecontent,
  getRecommendSingList, getTopAlbum
} from "@/network/recommend/recommendedcontent";

export default {
  components: {
    Banner,
    RecommendNav,
    RecommendMessage,
    RecommendUserMessage,
    RecommendSinger,
    MVRankingList,
    SomeHeartfeltWords,
  },
  name: "Recommend",
  data() {
    return {
      //可切换数据nav-bar数据
      item: [{name: '新歌推荐', type: 'getRecommendSingListAllMessage', index: 1},
        {name: '歌单', type: 'getPersonalizedAllMessage', index: 1},
        {name: '电台', type: 'getDJProgramAllMessage', index: 1},
        {name: '独家放送', type: 'getPrivatecontentAllMessage', index: 1},],//nav中的按钮信息
      // 可切换推荐数据存储
      getRecommendSingListAllMessage: [],
      getPersonalizedAllMessage: [],
      getDJProgramAllMessage: [],
      getPrivatecontentAllMessage: [],
      //可切换数据显示部分
      showMessage: [],
      //新碟上架nav-bar数据
      navTopAlbum: [{name: '新碟上架', type: 'getTopAlbumAllMessage', index: 2}],
      //新碟上架数据
      getTopAlbumAllMessage: [],
      // 榜单nav数据
      MVRankingNav: [{name: 'mv 排行', type: 'getMVRankingAllMessage', index: 3}],
      // 内地MV排行榜
      MVRankingListMessage: [{type: '内地', content: false},
        {type: '欧美', content: false},
        {type: '韩国', content: false}],
      newSongRecommend:{},
    }
  },
  created() {
    this.bus.$on('changeRecommendList', this.getChangeRecommendList)
    this.getRecommendSingListMessage()
    this.getPersonalizedMessage()
    this.getDJProgramMessage()
    this.getProgramRecommendMessage()
    this.getTopAlbumMessage()
    this.getMainLandMVRankingListMessage()
    this.getHatMVRankingListMessage()
    this.getKoreaMVRankingListMessage()
  },
  methods: {
    getChangeRecommendList(type, index) {
      if (index === 1) {
        this.showMessage = this[type]
        
      }
    },
    async getRecommendSingListMessage() {//获取新歌推荐
      const {data: res} = await getRecommendSingList()
      this.getRecommendSingListAllMessage = res.result
      console.log(res.result)
      this.showMessage = res.result
    },
    async getPersonalizedMessage() {//获取歌单推荐
      const {data: res} = await getPersonalized(10)
      // console.log(res)
      this.getPersonalizedAllMessage = res.result
    },
    async getDJProgramMessage() {//获取电台
      const {data: res} = await getDJProgram()
      // console.log(res)
      this.getDJProgramAllMessage = res.result
    },
    async getProgramRecommendMessage() {
      const {data: res} = await getPrivatecontent(10)
      // console.log(res)
      this.getPrivatecontentAllMessage = res.result
    },
    async getTopAlbumMessage() {
      const {data: res} = await getTopAlbum('ZH', 10)
      this.getTopAlbumAllMessage = res.albums
      // console.log(res)
    },
    async getMainLandMVRankingListMessage() {//获取内陆mv排行
      const {data: res} = await getMVRankingList(10, '内地')
      // console.log(res)
      this.MVRankingListMessage[0].content = res.data
    },
    async getHatMVRankingListMessage() {//获取港台mv排行
      const {data: res} = await getMVRankingList(10, '欧美')
      // console.log(res)
      this.MVRankingListMessage[1].content = res.data
    },
    async getKoreaMVRankingListMessage() {//获取韩国mv排行
      const {data: res} = await getMVRankingList(10, '韩国')
      // console.log(res)
      this.MVRankingListMessage[2].content = res.data
    },
    
  },
}
</script>

<style scoped lang="less">
.main-content-container {
  padding: 35px 10% 0 10%;
  display: flex;
  
  .recommend-list-container {
    width: 80%;
    .mv-ranking-list-container {
      margin-top: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-evenly;
      
      .mv-ranking-list {
        width: 30%;
      }
    }
  }
  
  .userInfo-content-container {
    width: 20%;
    margin-top: 20px;
    margin-left: 30px;
    
    .singer {
      margin-top: 20px;
    }
  }
}

</style>
